import React, { useState, useEffect } from "react"
import { Table, Space, Button } from 'antd'
import { connect } from "react-redux"
import "./index.css"
import axios from "axios"

const Grade = (props) => {
    //解构props
    const { commanderCheckList2 } = props
    //模拟声明周期
    useEffect(() => {
        //默认渲染一次页面
        getCommanderCheck2()
    }, [])
    //团长审核请求数据函数
    const getCommanderCheck2 = () => {
        axios.get("/colonelaudit").then(res => {
            console.log(res.data.data)
            props.dispatch({
                type: "COMMAND_CHECK_LIST2",
                payload: res.data.data
            })
        })
    }
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            align: "center"
        },
        {
            title: '头像',
            dataIndex: 'img',
            render: (text, record) => (
                <img className='img' src={record.img} alt="" />
            ),
        },
        {
            title: '手机号',
            dataIndex: 'tel',
            key: 'tel',
        },
        {
            title: '所属城市',
            dataIndex: 'city',
            key: 'city',
        },
        {
            title: '自提点信息',
            dataIndex: 'text',
            key: 'text',
        },
        {
            title: '团长配送费',
            dataIndex: 'peifei',
            key: 'peifei',
        },
        {
            title: '审核人姓名',
            dataIndex: 'shenname',
            key: 'shenname',
        },
        {
            title: '申请时间',
            dataIndex: 'shengtime',
            key: 'shengtime',
        },
        {
            title: '审核时间',
            dataIndex: 'hetime',
            key: 'hetime',
        },
        {
            title: '审核状态',
            // dataIndex: 'lls',
            key: 'lls',
            render: (text, record) => (
                <span style={{ color: `${record.color}` }}>{record.lls}</span>
            ),
        },
        {
            title: '操作',
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    <p className={record.lls === "待审核" ? 'activeCheckcommander' : "activeCheckcommander2"}>
                        <span onClick={() => { pass(record.id) }}>过</span>
                        <span onClick={() => { unPass(record.id) }}>不过</span>
                    </p>
                </Space>
            ),
        },
    ];
    //分页
    const [pagination, setPagination] = useState({ current: 1, pageSize: 3 })
    //页脚改变
    const handleTableChange = (pagination) => {
        setPagination(pagination)
    }
    //搜索
    const [value, setValue] = useState("")
    //监听value值变化
    const changeValue = (e) => {
        setValue(e.target.value)
        // console.log(e.target.value)
    }
    //搜索事件
    const search = () => {
        console.log(value)
        axios(`/colonelauditsou/?name=${value}`).then(res => {
            console.log(res)
            props.dispatch({
                type: "SEARCH_COMMANDERCHECK2_LIST",
                payload: res.data.data
            })
        })
    }
    //下拉搜索
    const [selectValue, setSelectValue] = useState("")
    //监听下拉搜索事件
    const changeSelectValue = (e) => {
        console.log(e.target.value)
        setSelectValue(e.target.value)
        props.dispatch({
            type: "SELECTVALUE_COMMANDERCHECK",
            payload: { value: e.target.value }
        })
    }
    //审核通过事件
    const pass = (id) => {
        console.log(id)
        props.dispatch({
            type: "PASS_COMMANDER_CHECK_LIST",
            payload: { id: id }
        })
    }
    //审核不通过事件
    const unPass = (id) => {
        props.dispatch({
            type: "UNPASS_COMMANDER_CHECK_LIST",
            payload: { id: id }
        })
    }
    return <div className='grade'>
        {/* 头部 */}
        <div className='gradeHeader'>
            <p>
                <span>审核状态</span>
                <select value={selectValue} onChange={changeSelectValue}>
                    <option value="全部">全部</option>
                    <option value="待审核">待审核</option>
                    <option value="成功">成功</option>
                    <option value="失败">失败</option>
                </select>
            </p>
            <p>
                <input type="text" value={value} onChange={changeValue} />
                <Button onClick={search} type="primary">搜索</Button>
            </p>
        </div>
        {/* 主体 */}
        <div className='gradeBody'>
            <Table pagination={pagination} onChange={handleTableChange} scroll={{ y: 540 }} dataSource={commanderCheckList2} columns={columns} rowKey="id" />
        </div>
    </div>
}

export default connect((state) => {
    return {
        commanderCheckList2: state.commanderCheckList2
    }
})(Grade)

